<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
<script type="text/javascript" src="./lib/cuon-utils.js"></script>
<script type="text/javascript" src="./lib/webgl-debug.js"></script>
<script type="text/javascript" src="./lib/webgl-utils.js"></script>
<script type="text/javascript">
	var VSHADER_SOURCE =
	'attribute vec4 a_Position;'+
	//'uniform vec4 u_Translation;'+
	'attribute float u_CosB,u_SinB;'+
	'void main(){'+
	//'gl_Position = a_Position + u_Translation;'+
	'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;'+
	'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;'+
	'gl_Position.z = a_Position.z;'+
	'gl_Position.w = 1.0;'+
	'gl_PointSize = 10.0;'+
	'}';

	var FSHADER_SOURCE =
	'void main(){'+
	'gl_FragColor = vec4(1.0,0.0,0.0,1.0);'+
	'}';

	var Tx = 0.5, Ty = 0.5, Tz = 0.0;
	function start () {
		var canvas = document.getElementById("webgl");
		var gl = getWebGLContext(canvas);
		if (!gl){
			alert('gl fail');
			return;
		}
		if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
			alert('shader fail');
			return;
		}

		var n = initVertexBuffers(gl);
		if (n<0){
			alert('vertexbuffers fail');
			return;
		}

		// var u_Translation = gl.getUniformLocation(gl.program,'u_Translation');
		// if (!u_Translation) {
		// 	alert('uniform fail');
		// 	return;
		// }
		// 
		var frames = 0
		function renderer(){
			frames++;
			render(gl,n,frames);
			requestAnimationFrame(renderer)
		}
		renderer()
	}

	function render(gl,n,frames){
		var u_CosB = gl.getAttribLocation(gl.program,'u_CosB');
		if (u_CosB < 0) {
			alert('uniform u_CosB fail');
			return;
		}

		var u_SinB = gl.getAttribLocation(gl.program,'u_SinB');
		if (u_SinB < 0) {
			alert('uniform  u_SinB fail');
			return;
		}

		var radian = Math.PI * (frames%360) /180.0;
		var cosB = Math.cos(radian);
		var sinB = Math.sin(radian);

		// gl.uniform4f(u_Translation,Tx,Ty,Tz,1.0);

		gl.vertexAttrib1f(u_CosB,cosB);
		gl.vertexAttrib1f(u_SinB,sinB);

		gl.clearColor(0,0,0,1);
		gl.clear(gl.COLOR_BUFFER_BIT);
		//gl.drawArrays(gl.POINTS,0,n);
		gl.drawArrays(gl.TRIANGLES,0,n);
	}

	function initVertexBuffers(gl){
		// var vertices = new Float32Array([-0.5,0.5,0.5,0.5,-0.5,-0.5,0.5,-0.5]);
		var vertices = new Float32Array([
   		 0, 0.5,   -0.5, -0.5,   0.5, -0.5
  		]);
		var n = 3;
		var vertexBuffer = gl.createBuffer();
		if(!vertexBuffer){
			alert('createBuffer fail');
			return;
		}
		gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STREAM_DRAW);

		var a_Position = gl.getAttribLocation(gl.program,'a_Position');
		if(a_Position <0){
			alert('attribute fail')
			return;
		}
		gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
		gl.enableVertexAttribArray(a_Position);
		return n;
	}

</script>
<body onload="start()">
<canvas id="webgl" width="500" height="500"></canvas>
</body>
</html>